<template>
  <div>
    <div>
      <!-- {{mapurl[0]}} -->
      <!-- {{ mp3id[0].title }} -->
      <!-- {{ mp3id[0].name }} -->
      <!-- {{ mapurl[0].url }} -->
      <!-- {{ mp3id[0].url }} -->
      <!-- title: 'secret base~君がくれたもの~',
        artist: 'Silent Siren',
        src:'http://m801.music.126.net/20211011165320/a7a012fe346f7c630f147d2877304e66/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/5032345250/1369/69c8/5f12/7912c84c07cc15070fca06b4986eb98d.mp3',
        pic:'http://p4.music.126.net/lUkMyaM7i_XhlyyafcQT0Q==/18141941859131607.jpg', -->
    </div>
    <aplayer
      :music="{
        title: mp3id[0].title,
        artist: mp3id[0].name,
        src: 123 ,
        pic: mp3id[0].url,
      }"
      :list="mapurl"
    />
  </div>
</template>

<script>
import Aplayer from "vue-aplayer";
import { mapState } from "vuex";
export default {
  name: "music",
  data() {
    return {
      music: {},
    };
  },
  components: {
    Aplayer,
  },
  computed: {
    ...mapState(["mapurl", "mp3id"]),
  },
 create() {
  console.log(1);
   console.log(this.$store.state.mapurl[0].url,this.$store.state.mp3id[0].url);

  }
};
</script>

<style></style>
